{% load static shop_tags %}

<div id="pageGoods" class="mb-3">
    <div class="columns is-multiline">
        {% for spu in page_obj %}
        <div class="column is-3">
            {% spu_box spu %}
        </div>
        {% empty %}
        <div class="is-flex is-align-items-center is-justify-content-center is-flex-direction-column" style="min-height:300px; width:100%">
            <img src="{% static 'baykeshop/img/noGoods.png' %}" alt="" srcset="">
            <p class=" has-text-grey-light">亲，该分类暂无商品哟~</p>
        </div>
        {% endfor %}
    </div>
    
    {% if page_obj %}
    <b-pagination 
        :total="total" 
        v-model="current" 
        :range-before="rangeBefore" 
        :range-after="rangeAfter"
        :order="order" 
        :size="size" 
        :simple="isSimple" 
        :rounded="isRounded" 
        :per-page="perPage"
        :icon-prev="prevIcon" 
        :icon-next="nextIcon" 
        aria-next-label="Next page"
        aria-previous-label="Previous page" 
        aria-page-label="Page" 
        aria-current-label="Current page"
        :page-input="hasInput" 
        @change="convertToRoman" 
        :page-input-position="inputPosition"
        :debounce-page-input="inputDebounce">
        <template #default="props">
            <b-pagination-button 
                :page="props.page" 
                :id="`page${props.page.number}`" 
                tag="a"
                href="`{{ request.path }}?page=${props.page.number}`"
                class="is-block is-clickable">
                {$ props.page.number $}
            </b-pagination-button>
        </template>
    </b-pagination>
    {% endif %}
</div>
<script>
    var current = '{{ current }}'
    var pageGoods = new Vue({
        el: '#pageGoods',
        delimiters: ['{$', '$}'],
        data: {
            total: '{{ total }}',
            current: Number(current),
            perPage: '{{ per_page }}',
            rangeBefore: 3,
            rangeAfter: 1,
            order: 'is-centered',
            size: 'is-small',
            isSimple: false,
            isRounded: false,
            hasInput: false,
            prevIcon: 'chevron-left',
            nextIcon: 'chevron-right',
            inputPosition: '',
            inputDebounce: '',
            params: ''
        },
        methods: {
            convertToRoman(num){
                let order = this.params.order ? `&order=${this.params.order}`: ''
                location.href = `{{ request.path }}?page=${num}${order}`
            }
        }
    })
</script>
